<template>
  <div class="appraise-container">
    <h1>订单评价</h1>

    <!-- 订单信息 -->
    <div class="order-info" v-if="orderInfo">
      <div class="order-header">
        <span class="order-id">订单号：{{ orderInfo.orderId }}</span>
        <span class="order-time">{{ orderInfo.orderTime }}</span>
      </div>

      <!-- 商品列表 -->
      <div class="order-items">
        <div v-for="item in orderInfo.items" :key="item.id" class="item">
          <img :src="`http://localhost:3005/${item.image}`" :alt="item.title">
          <div class="item-info">
            <h3>{{ item.title }}</h3>
            <p class="item-price">¥{{ item.price.toFixed(1) }} × {{ item.quantity }}</p>
          </div>
        </div>
      </div>

      <!-- 评价表单 -->
      <div class="appraise-form">
        <div class="rating-section">
          <span class="label">商品评分：</span>
          <el-rate v-model="rating" :colors="colors" show-score></el-rate>
        </div>
        <div class="comment-section">
          <span class="label">评价内容：</span>
          <el-input
            v-model="comment"
            type="textarea"
            :rows="4"
            placeholder="请输入您的评价内容（最少10个字）"
          ></el-input>
        </div>
        <div class="submit-section">
          <el-button type="primary" @click="submitAppraise" :disabled="!isValid">提交评价</el-button>
        </div>
      </div>
    </div>

    <!-- 空状态 -->
    <div v-else class="empty-state">
      <p>暂无待评价订单</p>
      <el-button type="primary" @click="router.push('/order')">去点餐</el-button>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, computed } from 'vue'
import { useRouter, useRoute } from 'vue-router'
import { ElMessage } from 'element-plus'

const router = useRouter()
const route = useRoute()

// 获取订单信息
const orderInfo = ref(null)

// 从localStorage获取订单信息
const initOrderInfo = () => {
  const orderId = route.query.orderId
  if (!orderId) return

  const storedOrders = localStorage.getItem('orders')
  if (storedOrders) {
    const orders = JSON.parse(storedOrders)
    const order = orders.find(o => o.orderId === orderId)
    if (order && !order.appraise) {
      orderInfo.value = order
    }
  }
}

// 初始化订单信息
initOrderInfo()

// 评分和评价
const rating = ref(5)
const comment = ref('')
const colors = ['#F7BA2A', '#F7BA2A', '#F7BA2A']

// 表单验证
const isValid = computed(() => {
  return rating.value > 0 && comment.value.length >= 10
})

// 提交评价
const submitAppraise = () => {
  if (!isValid.value) {
    ElMessage.warning('请填写完整的评价信息（评分和至少10个字的评价）')
    return
  }

  try {
    // 获取已有订单列表
    const storedOrders = localStorage.getItem('orders')
    if (storedOrders) {
      const orders = JSON.parse(storedOrders)
      // 更新对应订单的评价信息
      const orderIndex = orders.findIndex(order => order.orderId === orderInfo.value.orderId)
      if (orderIndex !== -1) {
        orders[orderIndex] = {
          ...orders[orderIndex],
          appraise: {
            rating: rating.value,
            comment: comment.value,
            time: new Date().toISOString()
          }
        }
        // 保存更新后的订单列表
        localStorage.setItem('orders', JSON.stringify(orders))
        ElMessage.success('评价提交成功')
        // 返回个人中心
        router.push('/profile')
      }
    }
  } catch (error) {
    console.error('提交评价失败:', error)
    ElMessage.error('提交评价失败，请重试')
  }
}
</script>

<style scoped>
.appraise-container {
  width: 400px;
  padding: 20px;
  padding-bottom: 80px;
  background-color: #f8f9fa;
  min-height: 100vh;
}

h1 {
  text-align: center;
  color: #333;
  font-size: 24px;
  margin-bottom: 30px;
}

.order-info {
  background: white;
  border-radius: 8px;
  padding: 15px;
  margin-bottom: 20px;
}

.order-header {
  display: flex;
  justify-content: space-between;
  margin-bottom: 15px;
  font-size: 14px;
  color: #666;
}

.order-items {
  border-top: 1px solid #eee;
  padding-top: 15px;
}

.item {
  display: flex;
  align-items: center;
  padding: 10px 0;
  border-bottom: 1px solid #eee;
}

.item img {
  width: 60px;
  height: 60px;
  object-fit: cover;
  border-radius: 4px;
}

.item-info {
  flex: 1;
  margin-left: 15px;
}

.item-info h3 {
  margin: 0;
  font-size: 14px;
}

.item-price {
  color: #666;
  margin: 5px 0 0;
  font-size: 12px;
}

.appraise-form {
  margin-top: 20px;
  padding-top: 20px;
  border-top: 1px solid #eee;
}

.rating-section,
.comment-section {
  margin-bottom: 20px;
}

.label {
  display: block;
  margin-bottom: 10px;
  color: #333;
  font-size: 14px;
}

.submit-section {
  text-align: center;
  margin-top: 30px;
}

.empty-state {
  text-align: center;
  padding: 40px 0;
}

.empty-state p {
  color: #666;
  margin-bottom: 20px;
}
</style>